<template>
  <a-layout class="h-screen w-screen">
    <a-layout class="relative">
      <a-layout-header class="header-wrapper">
        <div
          class="h-[64px] border-b border-solid border-[#e2e2ea] flex items-center"
          :class="collapsed ? 'px-3' : 'px-6'"
        >
          <span :class="collapsed ? '' : 'mr-4'">
            <Logo></Logo>
          </span>
          <span>园查查</span>

          <el-button class="ml-20" type="text" @click="handleBack">返回</el-button>
        </div>

        <div class="flex items-center">
          <div class="mr-8">
            <a-popover>
              <template slot="content">
                <MoreApp />
              </template>
              <div class="flex items-center">
                <span class="mr-2">更多应用</span>
                <a-icon class="text-main-tips" type="caret-down" />
              </div>
            </a-popover>
          </div>
          <div class="mr-8">
            <a-badge dot>
              <a-icon class="text-xl" type="bell" />
            </a-badge>
          </div>
          <a-dropdown>
            <div class="flex items-center cursor-pointer">
              <div class="mr-2">
                <a-avatar
                  :size="32"
                  icon="user"
                  :src="userInfo.iconUrl && userInfo.iconUrl[0] && userInfo.iconUrl[0].url"
                />
              </div>

              <div class="mr-6">
                <div class="text-main-title text-sm">
                  {{ userInfo.accountName }}
                </div>
                <div class="text-main-content text-xs">
                  {{ userInfo.orgName }}
                </div>
              </div>

              <a-icon class="text-main-tips" type="caret-down" />
            </div>

            <template #overlay>
              <UserInfo />
            </template>
          </a-dropdown>
        </div>
      </a-layout-header>
      <a-layout-content>
        <div class="h-full">
          <nuxt-child></nuxt-child>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script lang="ts">
import Vue from 'vue'
import { mapGetters } from 'vuex'
// @ts-ignore
import Logo from '@/assets/svg/logo.svg?inline'
import UserInfo from '@/components/admin/userCenter/UserInfo.vue'
import MoreApp from '@/components/admin/userCenter/MoreApp.vue'
import { MutationsType } from '@/actions/user'

export default Vue.extend({
  components: {
    Logo,
    UserInfo,
    MoreApp,
  },
  layout: 'client-only',
  middleware: ['adminAuth'],
  data() {
    return {
      collapsed: false,
    }
  },
  computed: {
    ...mapGetters('user', ['menus', 'allMenus', 'userInfo']),
  },
  methods: {
    handleBack() {
      this.$store.commit(MutationsType.SET_SHOW_MORE_APP, false)
      // this.$router.push('/admin')
      history.back()
    },
  },
})
</script>
<style lang="scss" scoped>
.header-wrapper {
  @apply bg-white
            px-4
            border-b border-solid border-[#e2e2ea]
            flex
            justify-between
            items-center;
}

.webkit-scrollbar {
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: rgba(50, 50, 50, 0.25);
    border: 2px solid transparent;
    border-radius: 10px;
    background-clip: padding-box;
  }

  &::-webkit-scrollbar-track {
    background-color: rgba(50, 50, 50, 0.05);
  }
}
</style>
